import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';

import Input from '@kuiper-components/input';
import Select, { Option } from '@kuiper-components/select';
import Button from '@kuiper-components/button';
import { Search24 as SearchIcon } from '@carbon/icons-react';

import CopyBoard from '../../../../../components/CopyBoard';
import PageTable from '../../../../../components/LocalPagingTable';
import { WARN_LEVEL_MAP } from '../../../../../../common/constants';
import ChartTitle from '../../../../../components/ChartTitle';
import s from './WarningDetail.module.css';
import { datetime } from '../../../../../../common/formatter';

const STATUS_ARR = ['已忽略', '已修复', '待修复'];

const columns = [
	{
		title: '时间',
		dataIndex: 'datetime',
		key: 'datetime',
		className: s.date,
		render(date) {
			return <span className={s.time}>{datetime(date)}</span>;
		},
	},
	{
		title: '风险地址',
		dataIndex: 'affects',
		width: 160,
		key: 'affects',
		render(affects) {
			return <CopyBoard text={affects} className={s.affects2} />;
		},
	},
	{
		title: '威胁名称',
		dataIndex: 'title',
		key: 'title',
		width: 240,
	},
	{
		title: '威胁等级',
		dataIndex: 'level',
		key: 'level',
		width: 96,
		render(level) {
			return <span>{WARN_LEVEL_MAP[level]}</span>;
		},
	},
	{
		title: '威胁详情',
		dataIndex: 'detail',
		key: 'detail',
		render(detail) {
			return <CopyBoard text={detail?.impact} className={s.affects} />;
		},
	},
	// {
	// 	title: '状态',
	// 	dataIndex: 'status',
	// 	key: 'status',
	// 	width: '6rem',
	// 	render(status) {
	// 		return (
	// 			<span className={cn({ [s.warning]: status === '待修复' })}>
	// 				{status}
	// 			</span>
	// 		);
	// 	},
	// },
];

const onTableFilter = ({ data, filter }) => {
	const filterArr = Object.entries(filter);
	const res = data.filter(row => {
		return filterArr.every(([key, val]) => {
			if (key === 'affects') {
				return row[key]?.toLowerCase().indexOf(val?.toLowerCase()) > -1;
			}
			return val === row[key].toString() || val === '';
		});
	});
	return res;
};

export default function WarningDetail({
	className,
	data,
	titleList,
	getDropdownRef,
}) {
	const [filter, setFilter] = React.useState({});
	const [affects, setAffects] = React.useState();

	const [page, setPage] = React.useState(1);

	const tableData = React.useMemo(() => {
		let warningsList = [];
		Object.values(data).forEach(arr => {
			warningsList = warningsList.concat(arr);
		});
		return warningsList.sort((a, b) => b.datetime - a.datetime);
	}, [data]);
	const handlePageChange = page => {
		setPage(page);
	};

	const handleLevelChange = level => {
		setFilter({ ...filter, level });
		setPage(1);
	};

	const handleStatusChange = status => {
		setFilter({ ...filter, status });
		setPage(1);
	};

	const handleNameChange = title => {
		setFilter({ ...filter, title });
		setPage(1);
	};

	const handleAffectsChange = val => {
		if (!val) setFilter({ ...filter, affects: undefined });
		setAffects(val);
	};

	const handleAffectsSubmit = () => {
		setFilter({ ...filter, affects });
	};

	const handleReset = () => {
		setFilter({});
		setAffects('');
	};

	return (
		<div className={cn(className, s.warningDetail)}>
			<ChartTitle>SSL威胁详情</ChartTitle>
			<div className={s.filterContainer}>
				<Input
					placeholder="请输入风险地址"
					type="search"
					className={s.input}
					value={affects}
					onChange={handleAffectsChange}
					onPressEnter={handleAffectsSubmit}
					after={
						<SearchIcon
							className={s.searchIcon}
							onClick={handleAffectsSubmit}
						/>
					}
				/>
				<div className={s.selectContainer}>
					<Select
						placeholder="请选择威胁名称"
						onChange={handleNameChange}
						className={s.select}
						getPopupContainer={getDropdownRef}
						allowClear
						value={filter?.title}
					>
						{titleList.map(title => (
							<Option key={title} value={title}>
								{title}
							</Option>
						))}
					</Select>
					<Select
						placeholder="请选择威胁等级"
						className={s.select}
						onChange={handleLevelChange}
						getPopupContainer={getDropdownRef}
						value={filter?.level}
						allowClear
					>
						{Object.entries(WARN_LEVEL_MAP).map(([val, label]) => (
							<Option key={val} value={val}>
								{label}
							</Option>
						))}
					</Select>
					<Button onClick={handleReset}>重置</Button>
				</div>
			</div>
			<PageTable
				className={cn(s.table, 'tableFormat')}
				page={page}
				onPage={handlePageChange}
				tableData={tableData}
				filter={filter}
				onFilter={onTableFilter}
				columns={columns}
			/>
		</div>
	);
}

WarningDetail.propTypes = {
	className: PropTypes.string,
	data: PropTypes.object,
	titleList: PropTypes.array,
	getDropdownRef: PropTypes.func,
};

WarningDetail.defaultProps = {
	className: s.warningDetail,
};
